@extends('admin.layout.app')

@section('title')
    年度评分
@endsection

@section('style')
	<link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet">
@endsection

@section('content') 
	@component('admin.components.nav') 
	@endcomponent
		<!--main-->
		<main>
			<div class="container">
				<div class="breadcrumb">
					<div class="row">
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<h3>年度评分</h3>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<form action="" class="form-inline form-search">
								<div class="form-group has-feedback">
									<label class="sr-only" for="search-input">搜索</label>
									<div class="input-group">
										<input id="search-input" type="search" class="form-control" placeholder="请选择年份" readonly v-model="keywords">
										<span v-if="keywords" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" @click="clearDate"></span>
									</div>
								</div>
								<button type="button" class="btn btn-primary btn-search" @click="search">搜索</button>
							</form>
						</div>
					</div>
				</div>
				<div class="data-table table-responsive">
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>编号</th>
								<th>名称</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<th scope="row">@{{item.id}}</th>
								<td>四川省大件公路管理处职工@{{item.value}}年度考核民主评议</td>
								<td>
									<a v-if="item.status == 1" :href="'/year_form?id='+item.id" class="btn btn-primary">开始评分</a>
									<a v-if="item.status && item.value === getYear()" :href="'/year_details?id='+item.id">查看详情</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="action-panel">
					<div class="row">
						<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
						</div>
						<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
							<span>共@{{total}}条</span>
							<span>@{{current_page}}/@{{last_page}}页</span>
							<nav class="nav-pager" aria-label="...">
								<ul class="pager">
									<li :class="{disabled:current_page<=1}"><a :disabled="current_page<=1" @click="pageTurn(-1)"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
							    	<li :class="{disabled:current_page>=last_page}"><a :disabled="current_page>=last_page" @click="pageTurn(1)"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></li>
								</ul>
							</nav>
							<form action="" class="form-inline form-pager">
								<div class="form-group">
								    <label for="page-number">跳转到</label>
								    <input type="number" id="page-number" class="form-control" placeholder="" v-model="turn_page">
								</div>
								<button type="button" class="btn btn-primary btn-goto" :disabled="!turn_page || turn_page>last_page" @click="toPage">GO</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</main>
@endsection

@section('script')
		<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script>
		<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript">
			var activeIndex = 3
		</script>
		<script src="/admin/js/nav.js" type="text/javascript"></script>
		<script src="/admin/js/years.js" type="text/javascript"></script>
@endsection